<!--
 * @Description: 
 * @Autor: 赵子惠
 * @Date: 2021-07-06 15:51:13
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-07-10 14:27:44
-->
<div class="codingd">
    <div class="m-subheader">
      <div class="row align-items-center">
        <div class="mr-auto col-auto">
          <h3 class="m-subheader__title m-subheader__title--separator">
            <span>日历设置</span>
          </h3>
        </div>
      </div>
    </div>
    <div class="m-content">
      <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
            <div class="p-formgroup-inline">
                <span class="p-field">
                    <!-- <span class="input-lable" style="margin-right: 20px;">名称：</span>
                    <input style="line-height: 24px!important;" id="input" type="text" size="30" pInputText [(ngModel)]="calendarName"> -->
                    <p-dropdown name="isUsed" [options]="name" [(ngModel)]="calendarName" placeholder="请选择名称"  emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span *ngIf="calendarName != undefind "  style="vertical-align:middle; margin-left: .5em;width: 200px;">{{item.label}}</span>
                            <span *ngIf="calendarName == undefind " style="vertical-align:middle; margin-left: .5em;width: 200px;"> </span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">{{model.label}}</div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                </span>
                <span class="p-field">
                    <span class="ml input-lable" style="margin-right: 20px;">作息排配：</span>
                    <p-dropdown name="isUsed" [options]="isUsedOptions" [(ngModel)]="workArrangement" placeholder="请选择作息排配"  emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span *ngIf="workArrangement != undefind "  style="vertical-align:middle; margin-left: .5em;width: 200px;">{{item.label}}</span>
                            <span *ngIf="workArrangement == undefind " style="vertical-align:middle; margin-left: .5em;width: 200px;"> </span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">{{model.label}}</div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                </span>
                <p-button label="查询" (onClick)="getTableList()" class="ml"></p-button>
                <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
            </div>
            <div style="margin-top: 30px;">
                <p-button label="新增" (onClick)="addOrUpdate()" ></p-button>
                <p-button label="删除" (onClick)="delete()" class="ml"></p-button>
            </div>
           <div class="row align-items-center" style="margin-top: 25px;">
            <div class="primeng-datatable-container">
              <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
                [(selection)]="selectRow"
              >
                <ng-template pTemplate="header" selectionMode="multiple">
                  <tr>
                    <th style="width: 50px">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th style="width: 100px">操作</th>
                    <th style="width: 150px">名称</th>
                    <th style="width: 150px">开始日期</th>
                    <th style="width: 150px">结束日期</th>
                    <th style="width: 150px">休息排配</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                  <tr>
                    <td style="width: 50px">
                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                    </td>
                    <td style="width: 100px">
                      <div class="btn-group dropdown" dropdown container="body">
                        <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                          <i class="fa fa-cog"></i><span class="caret"></span> 操作
                        </button>
                        <ul class="dropdown-menu" *dropdownMenu>
                            <li>
                                <a href="javascript:;" (click)="look(record)">履历</a>
                              </li>
                          <li>
                            <a href="javascript:;" (click)="addOrUpdate(record)">修改</a>
                          </li>
                        </ul>
                      </div>
                    </td>
                    <td style="width: 150px">{{record.calendarName}}</td>
                    <td style="width: 150px">{{record.startDate | momentFormat:'YYYY-MM-DD'}}</td>
                    <td style="width: 150px">{{record.endDate | momentFormat:'YYYY-MM-DD'}}</td>
                    <td style="width: 150px">{{record.workArrangement== 1? '工作':'休息'}}</td>
                  </tr>
                </ng-template>
              </p-table>
           <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                  (onPageChange)="getTableList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                  [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                </p-paginator>
                <span class="total-records-count">
                  {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看履历 -->
    <app-time-show-resume #appshowResume [parentInfo]="rowdata"></app-time-show-resume>
     <!-- 新增修改 -->
     <app-time-update #timeUpdate [editData]="rowdata" [title]="title" (modalSave)="getTableList()"></app-time-update>
  </div>